<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
*{
    box-sizing: border-box;
}
body{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    grid-auto-rows: 130px;
    place-items: center;
}
.boxone{
    width: 120px;
    height: 20px;
    background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd;
    /* 动画 */
    animation: boxone 2s infinite linear;
    border-radius: 10px;
}
@keyframes boxone {
    100%{
        background-size: 100%;
    }
}
.boxtwo{
    width: 120px;
    height: 20px;
    border-radius: 10px;
    background: linear-gradient(to right,pink ,skyblue  ) 0/0% no-repeat lightblue;
    /* 动画 */
    animation: boxtwo 2s infinite linear;
}
@keyframes boxtwo {
    100%{
        background-size: 110%;
    }
}
.boxtree{
    width: 120px;
    height: 20px;
    border-radius: 10px;
    background: repeating-linear-gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0/0% no-repeat,
    repeating-linear-gradient(135deg,#ddd 0 10px,#eee 0 20px) 0/100%;
    /* 动画 */
    animation: boxtree 2s infinite ;
}
@keyframes boxtree {
    100%{
        background-size: 100%;
    }
}
.boxfour{
    width: 120px;
    height: 20px;
    -webkit-mask:linear-gradient(90deg,#000 70%, #0000 0) 0/20%;
    background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd;
    /* 动画 */
    animation: boxfour 2s infinite steps(6);
}
@keyframes boxfour {
    100%{
        background-size: 120%;
    }
}
</style>
<body>
    <div class="boxone"></div>
    <div class="boxtwo"></div>
    <div class="boxtree"></div>
    <div class="boxfour"></div>
</body>
</html>